import React from 'react';
import ReactDOM from 'react-dom';


function UserGreeting(props) {
    return <h1>欢迎回来!</h1>;
}

function GuestGreeting(props) {
    return <h1>请先注册。</h1>;
}

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
        return <UserGreeting />;
    }
    return <GuestGreeting />;
}
function LoginButton(props) {
    return (
        <button info={props.info} onClick={props.onClick('嘻嘻哒,登陆成功')}>
            登陆
        </button>
    );
}

function LogoutButton(props) {
    return (
        <button onClick={props.onClick}>
            退出
        </button>
    );
}



class LoginControl extends React.Component {
    constructor(props) {
        super(props);
        this.handleLoginClick = this.handleLoginClick.bind(this);
        this.handleLogoutClick = this.handleLogoutClick.bind(this);
        this.state = {
            isLoggedIn: false,
            info:''
        };
    }

    handleLoginClick(info){
        this.setState({isLoggedIn: true});
    }

    handleLogoutClick(){
        this.setState({isLoggedIn: false});
    }

    render() {
        const isLoggedIn = this.state.isLoggedIn;

        let button = null;
        if (isLoggedIn) {
            button = <LogoutButton onClick={this.handleLogoutClick} />;
        } else {
            button = <LoginButton
                info = {this.state.info}
                onClick={(info)=>()=>this.handleLoginClick(info) }
            />;
        }
        /* todo 总有一天我会弄明白这边为什么要多加一个括号的*/
        return (
            <div>
                <Greeting isLoggedIn={isLoggedIn} />
                {button}
            </div>
        );
    }
}

ReactDOM.render(
    <LoginControl />,
    document.getElementById('root')
);